<!--
 * @author: sanbao
 * @Date: 2022-07-29 18:47:46
-->
<style lang='scss' scoped>
.my_list {
  .warp {
    display: flex;
    flex-wrap: wrap;
    .list {
      width: 23.2%;
      box-sizing: border-box;
      background-color: #fff;
      height: calc(710px / 2);
      text-align: center;
      margin-left: 20px;
      transition: all 0.3s;
      img {
        vertical-align: middle;
        width: 80%;
        padding: 30px;
        box-sizing: border-box;
      }
      &:nth-child(-n + 4) {
        margin-bottom: 20px;
      }
      p {
        span {
          display: inline-block;
          margin: 10px;
        }
        > :nth-child(1) {
          color: red;
        }
      }
    }
    .list:hover {
      box-shadow: 0 16px 32px 0 rgb(69, 66, 66); /* 鼠标悬浮时盒子出现的阴影 */
      transform: translate(0, -10px); /* 鼠标悬浮时盒子上移10px */
    }
    .p {
      line-height: calc(710px / 2);
    }
    .p span:hover {
      color: red;
    }
  }
}
</style>

<template>
  <div class="my_list">
    <div class="warp">
      <div class="list" v-for="(item, index) in list" :key="index">
        <img :src="'http://101.132.181.9:3000/' + `${item.product_picture}`" />
        <h4>{{ item.product_name }}</h4>
        <span>{{ item.product_title }}</span>
        <p>
          <span>{{ item.product_selling_price }}元</span>
          <span>
            <s>{{ item.product_price }}元</s>
          </span>
        </p>
      </div>
      <div class="list p">
        <span @click="$router.push(`/goods?id=${list[0].category_id}`)">
          浏览更多 》》
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
export default {
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  components: {},
  setup() {
    return {};
  },
};
</script>
